<template>
    <div class="musci-rank">
        <div class="rank-top">
            <div class="title"><slot name="titleText"></slot></div>
            <div class="link"><router-link to="/Find">更多<i class="iconfont icon-bofang"></i></router-link></div>
        </div>

        <div class="rank-part" ref="companyStyle" @touchstart="touchIn" @touchend="touchUp" @touchmove="touchOn">
            <ul class="rank-ul" :style="{width : ulWidth*this.newArr.length+'px','transform'  : `translateX(-${needMove}px)`,'transition': transition}">
                <li class="rank-li" :style="{width : liWidth+'px',margin : `0rem ${mg}px`}" v-for="item in newArr" :key="item.id">
                    <h3>{{item.name}}</h3>
                    <ul class="text-ul">
                        <li class="text-li" v-for="(element,index) in item.rank" :key="element.id"><span>{{index+1}}.</span><span @touchstart="touchGo(element.first)">{{element.first}}</span></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name : 'musicRank',
    data(){
        return{
            ulWidth : 0,
            liWidth : 0,
            mg : 0,
            newArr : [],
            transition : "transform 0.2s",
            limit : 0,
            touchMove : 0
        }
    },
    computed : {
        needMove(){
            let needMove = 0;
            needMove = this.limit*this.ulWidth+this.touchMove;
            return needMove;
        }
    },
    methods : {
        touchIn(e){
            this.touchFirst = e.changedTouches[0].pageX;
        },
        toNext(){
            this.limit++;
            this.limit = this.limit>=this.newArr.length ? this.newArr.length-1 : this.limit;
        },
        toPre(){
            this.limit--;
            this.limit = this.limit<0 ? 0 : this.limit;
        }
        ,
        touchUp(){
            let isChange = Math.abs(this.touchMove);
            if(isChange-this.ulWidth/2 >0) {
                if(this.touchMove>0){
                this.toNext()
                this.transition = "transform 0.2s";
                }else if(this.touchMove<0){
                this.toPre()
                this.transition = "transform 0.2s";
                }
            }
            this.transition = "transform 0.2s";
            this.touchMove = 0;
        },
        touchOn(e){
            this.transition = "none";
            this.touchMove = this.touchFirst-e.changedTouches[0].pageX
        },
        touchGo(str){
            this.$parent.clickSend(str)
        }
    },
    mounted(){
         this.$nextTick(()=>{

                    this.ulWidth = this.$refs.companyStyle.offsetWidth;
                    this.liWidth = this.ulWidth*0.9;
                    this.mg = this.ulWidth*0.025

        })
    },
    created(){
        axios.defaults.withCredentials = true;
        axios.get("/api/search/hot").then(response=>{
            
            let obj = {};
            let arr = [];
            obj.name = "热搜榜";
            obj.id = Symbol();
                response.data.result.hots.forEach(item=>{
                    arr.push(item)
                })
                obj.rank = arr
                this.newArr.push(obj)
                
        });
    }
}
</script>

<style lang="scss" scoped>
    .musci-rank {
        width: 90%;
        margin: auto;
        padding: 2rem 0rem;
    }

    .rank-top {
        width: 100%;
        height: 1.5rem;
        margin: 0.5rem 0rem ;
        display: flex;
        justify-content: space-between;


        .title {
            text-align: left;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .link {
            padding:0rem 0.3rem;
            line-height: 1.4rem;
            font-size: 0.6rem;
            border: 1px solid rgb(163, 163, 163);
            border-radius: 5rem;

            >a {
                color: #000;
                text-decoration: none;
                font-size: 0.8rem;
            }

            .iconfont {
                font-size: 0.8rem;
            }
        }
    }

    .rank-part {
        width: 100%;
        overflow: hidden;
    }

    .rank-ul {
        display: flex;
    }

    .rank-li {
        padding: 0.5rem;
        background: #33CCBB;
        border-radius: 0.5rem;
        color: #fff;

        >h3 {
            width: 100%;
            height: 2rem;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 2rem;
            text-align: center;
            white-space: nowrap;
		    /*溢出部分文字隐藏*/
		    overflow: hidden;
		    /*溢出部分省略号处理*/
		    text-overflow: ellipsis;
        }

        .text-ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .text-li {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            color: #fff;
            text-align: center;

            >span {
                margin: 0.2rem;
            }
        }
    }
</style>